<template>
<!-- 注册和忘记密码公用组件 -->
<div class="login">
  <div class="login-body">
     <h3 class="login-body__title t-c  ft-24">管理系统</h3>
    <div class="login-body__wrap">
      <div class="login-form">
        <el-form :model="formData" :rules="rules" ref="formData" class="wd100">
          <el-form-item>
            <p class="login-tit">{{regText}}</p>
          </el-form-item>
          <el-form-item prop="phoneNo">
            <el-input placeholder="手机号" v-model.trim="formData.phoneNo" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input :type="passw" placeholder="密码" v-model.trim="formData.password" autocomplete="new-password">
              <i slot="suffix" class="iconfont" :class="icon" @click="showPass"></i>
            </el-input>
            <div class="pwd-tips">8-20位字母，数字组合</div>
          </el-form-item>
          <el-form-item prop="password1">
            <el-input :type="passw1" placeholder="确认密码" v-model.trim="formData.password1" autocomplete="new-password">
              <i slot="suffix" class="iconfont" :class="icon1" @click="showPass1"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="smsCode">
            <sendSmsCode :phoneNo="formData.phoneNo" :smsCode="formData.smsCode" @updated="item=>formData.smsCode=item" @getSmsId="getSmsId"></sendSmsCode>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="wd100" :loading="loading" @click="onSubmit('formData')" @keyup.enter="onSubmit('formData')" v-stop-reClick>{{buttonText}}</el-button>
          </el-form-item>
          <div class="row-tip">
            <span class="no-reg">
              <span class="btn-reg" @click="toLogin">账号登录</span>
            </span>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import '@/style/login.less'
import { mapState } from 'vuex'
import sha256 from 'js-sha256'
import sendSmsCode from '@/components/common/sendSmsCode'
export default {
  props: {
    regText: {
      type: String,
      default: '注册'
    }
  },
  components: {
    sendSmsCode
  },
  data () {
    const checkNewPassword = (rule, value, callback) => {
      const pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
      if (!value) {
        return callback(new Error('请再次输入密码'))
      } else {
        if (!pwdReg.test(value)) {
          return callback(new Error('密码必须是8-20位字母、数字组合!'))
        } else if (value !== this.formData.password) {
          return callback(new Error('两次输入的密码不一致，请重新输入！!'))
        } else {
          callback()
        }
      }
    }
    return {
      buttonText: '注册',
      loading: false,
      formData: {
        phoneNo: '',
        password: '',
        password1: '',
        smsCode: ''
      },
      smsId: '',
      rules: {
        phoneNo: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确手机号', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { pattern: /^[0-9A-Za-z]{8,20}$/, message: '8-20位字母、数字组合', trigger: 'change' }
        ],
        password1: [
          { required: true, validator: checkNewPassword, trigger: 'change' }
        ],
        smsCode: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' }
        ]
      },
      passw: 'password',
      passw1: 'password',
      icon: 'icon-login-close',
      icon1: 'icon-login-close'
    }
  },
  computed: {
    ...mapState({
      windowSize: 'windowSize'
    })
  },
  created () {
    this.initDefault()
  },
  mounted() {
    window.addEventListener('keydown', this.keyDown)
  },
  methods: {
    initDefault () {
      if (this.regText === '注册') {
        this.buttonText = '注册'
      } else if (this.regText === '重置密码') {
        this.buttonText = '重置'
      }
    },
    keyDown(e) {
      if (e.keyCode === 13) {
        this.onSubmit('formData')
      }
    },
    getSmsId (val) {
      this.smsId = val
    },
    showPass () {
      if (this.passw === 'text') {
        this.passw = 'password'
        this.icon = 'icon-login-close'
      } else {
        this.passw = 'text'
        this.icon = 'icon-login-open'
      }
    },
    showPass1 () {
      if (this.passw1 === 'text') {
        this.passw1 = 'password'
        this.icon1 = 'icon-login-close'
      } else {
        this.passw1 = 'text'
        this.icon1 = 'icon-login-open'
      }
    },
    onSubmit (val) {
      this.$refs[val].validate((valid) => {
        if (!valid) return
        this.submitData(val)
      })
    },
    submitData (val) {
      this.loading = true
      let newTransCode = 'POMM0001'
      let diffPassword = {}
      if (this.regText === '注册') {
        newTransCode = 'POMM0001'
        diffPassword = {
          password: sha256(this.formData.password)
        }
      } else if (this.regText === '重置密码') {
        newTransCode = 'POMM0009'
        diffPassword = {
          newPwd: sha256(this.formData.password)
        }
      }
      const param = {
        transCode: newTransCode,
        phoneNo: this.formData.phoneNo,
        smsCode: this.formData.smsCode,
        smsId: this.smsId,
        ...diffPassword
      }
      setTimeout(() => {
        console.log(param)
        this.loading = false
        this.$message({ message: `${'恭喜您' + this.regText + '成功，请登录'}`, type: 'success' })
        this.$router.push({ path: '/login', query: { phoneNo: this.formData.phoneNo } })
      }, 1000)
    },
    toLogin () {
      this.$router.push('/login')
    }
  },
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false)
  }
}
</script>
<style lang="less" scoped>
</style>
